@import "bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@import "bpmn-js-token-simulation/assets/css/font-awesome.min.css";
@import "bpmn-js-token-simulation/assets/css/normalize.css";
@import "diagram-js-minimap/assets/diagram-js-minimap.css";

// 边框被 token-simulation 样式覆盖了
.djs-palette {
  background: var(--palette-background-color) !important;
  border: solid 1px var(--palette-border-color) !important;
  border-radius: 2px !important;
}

.my-process-designer {
  // display: flex !important;
  // flex-direction: column !important;
  // width: 100% !important;
  // height: 100% !important;
  // box-sizing: border-box !important;

  .my-process-designer__header {
    width: 100% !important;
    min-height: 36px !important;

    .el-button {
      text-align: center !important;
    }

    .el-button-group {
      margin: 4px !important;
    }

    .el-tooltip__popper {
      .el-button {
        width: 100% !important;
        text-align: left !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
      }

      .el-button:hover {
        background: rgba(64, 158, 255, 0.8) !important;
        color: #ffffff !important;
      }
    }

    .align {
      position: relative !important;

      i {
        &:after {
          content: "|" !important;
          position: absolute !important;
          transform: rotate(90deg) translate(200%, -10%) !important;
        }
      }
    }

    .align.align-left i {
      transform: rotate(90deg) !important;
    }

    .align.align-right i {
      transform: rotate(-90deg) !important;
    }

    .align.align-top i {
      transform: rotate(180deg) !important;
    }

    .align.align-bottom i {
      transform: rotate(0deg) !important;
    }

    .align.align-center i {
      transform: rotate(90deg) !important;

      &:after {
        transform: rotate(90deg) translate(0, -10%) !important;
      }
    }

    .align.align-middle i {
      transform: rotate(0deg) !important;

      &:after {
        transform: rotate(90deg) translate(0, -10%) !important;
      }
    }
  }

  .my-process-designer__container {
    display: inline-flex !important;
    width: 100% !important;
    flex: 1 !important;

    .my-process-designer__canvas {
      flex: 1 !important;
      height: 100% !important;
      position: relative !important;
      background: url("") repeat !important !important;

      div.toggle-mode {
        display: none !important;
      }
    }

    .my-process-designer__property-panel {
      height: 100% !important;
      overflow: scroll !important;
      overflow-y: auto !important;
      z-index: 10 !important;

      * {
        box-sizing: border-box !important;
      }
    }

    svg {
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      overflow: hidden !important;
    }
  }
}

//侧边栏配置
.djs-palette.open {
  .djs-palette-entries {

    div[class^="bpmn-icon-"]:before,
    div[class*="bpmn-icon-"]:before {
      line-height: unset !important;
    }

    div.entry {
      position: relative !important;
    }

    div.entry:hover {
      &::after {
        width: max-content !important;
        content: attr(title) !important;
        vertical-align: text-bottom !important;
        position: absolute !important;
        right: -10px !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
        transform: translateX(100%) !important;
        font-size: 0.5em !important;
        display: inline-block !important;
        text-decoration: inherit !important;
        font-variant: normal !important;
        text-transform: none !important;
        background: #fafafa !important;
        box-shadow: 0 0 6px #eeeeee !important;
        border: 1px solid #cccccc !important;
        box-sizing: border-box !important;
        padding: 0 16px !important;
        border-radius: 4px !important;
        z-index: 100 !important;
      }
    }
  }
}

pre {
  margin: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  max-height: calc(80vh - 32px) !important;
  overflow-y: auto !important;
}

.hljs {
  word-break: break-word !important;
  white-space: pre-wrap !important;
}

.hljs * {
  font-family: Consolas, Monaco, monospace !important;
}